<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
        组件的props:
          - props主要用来做父子组件之间的通信
          - 在父组件中给子组件标签中通过 属性的方式 向子组件内部传值
          - 子组件在组件内部通过 组件实例 上props属性来访问父组件传递的值
          - props是只读属性,不允许在子组件中修改props的值!!!(react是单向数据流)

      */

      class MySelf extends React.Component {
        render() {
          console.log(this);
          //props是只读属性
          //this.props.name = this.props.name + "~"
          return (
            <div>
              <h2>我的名字是:{this.props.name}</h2>
              <h2>我的年龄是:{this.props.age}</h2>
              <h2>我的性别是:{this.props.sex}</h2>
            </div>
          );
        }
      }
      //
      class App extends React.Component {
        render() {
          return (
            <div>
              <h1>下面是张三的自我介绍</h1>
              <MySelf name="张三" age="18" sex="男 " />
              <hr />
              <h1>下面是李四的自我介绍</h1>
              <MySelf name="李四" age="20" sex="女" />
            </div>
          );
        }
      }

      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
